<template>
	<view>
		<!-- 请输入你的id
		<input v-model="userId" style="width: 100px;height: 30px;" value="请输入要发送的id"/> -->
		<!-- 请输入要发送的id:
		<input v-model="params.toUseId" style="width: 100px;height: 30px;" value="请输入要发送的id"/> -->
		请输入要发送的消息
		<input v-model="params" style="width: 100px;height: 30px;" value="请输入要发送的消息"/>
		
		<button @click="send()">发送</button>
	</view>
</template>

<script>
export default {
    data () {
        return {
			toUseId:1,
            socket:"",
			userId:this.$store.state.count,
			params:'',
        }
    },
    mounted () {
        // 初始化
        this.init()
    },
    methods: {
        init: function () {
            if(typeof(WebSocket) === "undefined"){
                alert("您的浏览器不支持socket")
            }else{
                // 实例化socket
                this.socket = new WebSocket('ws://localhost:8081/imserver/'+this.userId+'/'+this.toUseId)
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket错误信息
                this.socket.onerror = this.error
                // 监听socket消息
                this.socket.onmessage = this.getMessage
            }
        },
        open: function () {
            console.log("socket连接成功")
        },
        error: function () {
            console.log("连接错误")
        },
        getMessage: function (msg) {
            console.log(msg.data)
        },
        send: function () {
            this.socket.send(this.params)
        },
        close: function () {
            console.log("socket已经关闭")
        }
    },
	// computed: {
	//       ...mapState({
	//         userInfo: state => state.user.userInfo,
	//         isLogin: state => state.user.isLogin,
	//       })
	//     },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    }
}
</script>

<style>

</style>

